<template>
	<view class="page-body">
		<map :scale="scale" :longitude="longitude" :latitude="latitude" :markers="markers" class="map-box"></map>
		<w-jishuzhichi class="jishuzhichi-nodata" />
	</view>
</template>

<script>
	import QQMapWX from '@/plugin/qqmap-wx-jssdk.min.js'
	import {
		location_key
	} from "@/config/app";
	export default {
		data() {
			return {
				address: '',
				longitude: '',
				latitude: '',
				markers: [],
				scale: 16,
				qqmapsdk: null
			};
		},
		onLoad(options) {
			if (this.$Route.meta.atitle) {
				uni.setNavigationBarTitle({
					title: this.$zhTran(this.$Route.meta.atitle)
				})
			}

			this.qqmapsdk = new QQMapWX({
				key: location_key
			});

			this.address = this.$Route.query.address
			this.scale = this.$Route.query.scale
			setTimeout(() => {
				this.getLocal()
			}, 500)
		},
		methods: {
			// 获取当前地理位置
			getLocal() {
				var that = this;
				this.qqmapsdk.geocoder({
					address: that.address,
					success(res) {
						if (res.message == 'query ok') {
							that.latitude = res.result.location.lat
							that.longitude = res.result.location.lng
							that.markers.push({
								id: 1,
								title: that.$zhTran(that.address),
								latitude: res.result.location.lat,
								longitude: res.result.location.lng
							})
						}
					},
					fail: function(res) {
						console.log(res);
					}
				})
			},
		}
	};
</script>
<style lang="scss">
	.map-box {
		width: 100%;
		height: calc(100vh - 90rpx - constant(safe-area-inset-bottom));
		height: calc(100vh - 90rpx - env(safe-area-inset-bottom));
	}
</style>